<!--
 * @Author: your name
 * @Date: 2021-07-20 10:33:35
 * @LastEditTime: 2021-09-10 14:30:28
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \usp-osm-frondend\src\views\system\userMgmt\index.vue
-->
<template>
    <div
    class="source"
    v-loading="pageLoading"
    :element-loading-text="loadingText"
  >
    <div class="content">
      <v-notes>
        <div class="filterStyle">
          <el-form
            label-width="120px"
            :model="searchList"
            ref="searchList"
            class="search-form"
            size="small"
          >
            <el-row class="search-row">
              <el-col :span="24">
                <el-row :gutter="20">
                  <el-col :span="8">
                  <el-form-item label="账号">
                    <el-input
                      placeholder="账号"
                      v-model="searchList.account"
                      clearable
                      v-on:keyup.enter.native="searchForm"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="员工编号">
                    <el-input
                      placeholder="员工编号"
                      v-model="searchList.employeeId"
                      @keyup.enter.native.prevent="searchForm"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="用户编号">
                    <el-input
                      placeholder="用户编号"
                      v-model="searchList.userId"
                      @keyup.enter.native.prevent="searchForm"
                    ></el-input>
                  </el-form-item>
                </el-col>
                </el-row>
                <el-collapse-transition>
                  <div class="filterContent" v-if="showContent">
                    <el-row :gutter="20">
                <!-- <el-col :span="8">
                  <el-form-item label="租户编号">
                    <el-input
                      placeholder="租户编号"
                      v-model="searchList.tenantId"
                      @keyup.enter.native.prevent="searchForm"
                    ></el-input>
                  </el-form-item>
                </el-col> -->
                <el-col :span="8">
                  <el-form-item label="姓名">
                    <el-input
                      placeholder="姓名"
                      v-model="searchList.name"
                      @keyup.enter.native.prevent="searchForm"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="英文名">
                    <el-input
                      placeholder="英文名"
                      v-model="searchList.nameEn"
                      @keyup.enter.native.prevent="searchForm"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="用户名称">
                    <el-input
                      placeholder="用户名称"
                      v-model="searchList.userName"
                      @keyup.enter.native.prevent="searchForm"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="性别">
                    <el-select v-model="searchList.sex" placeholder="性别" popper-class="select-class" :popper-append-to-body="false">
                      <el-option label="全部" value></el-option>
                        <el-option
                          v-for="item in lookupItems.GENDER"
                          :key="item.id"
                          :label="item.dicName"
                          :value="item.dicCode"
                        ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="手机号码">
                    <el-input
                      placeholder="手机号码"
                      v-model="searchList.phoneNum"
                      @keyup.enter.native.prevent="searchForm"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="邮箱">
                    <el-input
                      placeholder="邮箱"
                      v-model="searchList.email"
                      @keyup.enter.native.prevent="searchForm"
                    ></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="工号">
                    <el-input
                      placeholder="工号"
                      v-model="searchList.employeeNo"
                      @keyup.enter.native.prevent="searchForm"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="账号类型">
                    <el-select v-model="searchList.accountType" placeholder="账号类型" popper-class="select-class" :popper-append-to-body="false">
                      <el-option label="全部" value></el-option>
                        <el-option
                          v-for="item in lookupItems.ACCOUNTTYPE"
                          :key="item.id"
                          :label="item.dicName"
                          :value="item.dicCode"
                        ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="入职时间" prop="roleCode">
                    <el-date-picker
                      v-model="searchList.registerTime"
                      align="center"
                      size="mini"
                      type="daterange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="yyyy-MM-dd">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="状态">
                    <el-select v-model="searchList.status" placeholder="状态" popper-class="select-class" :popper-append-to-body="false">
                      <el-option label="全部" value></el-option>
                        <el-option
                          v-for="item in lookupItems.USERSTATUS"
                          :key="item.id"
                          :label="item.dicName"
                          :value="item.dicCode"
                        ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="创建时间" prop="roleCode">
                    <div class="block">
                      <el-date-picker
                        v-model="searchList.createTime"
                        type="daterange"
                        range-separator="至"
                        :picker-options="pickerOptions"
                        :default-value="[new Date(), new Date()]"
                        value-format="yyyy-MM-dd"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                      ></el-date-picker>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="更新时间" prop="roleCode">
                    <div class="block">
                      <el-date-picker
                        v-model="searchList.updateTime"
                        type="daterange"
                        range-separator="至"
                        :picker-options="pickerOptions"
                        :default-value="[new Date(), new Date()]"
                        value-format="yyyy-MM-dd"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                      ></el-date-picker>
                    </div>
                  </el-form-item>
                </el-col>
              </el-row>
                  </div>
                </el-collapse-transition>
              </el-col>
            </el-row>
            <el-row class="search-row">
              <el-col :span="12" :offset="12" style="text-align: right">
                <el-button
                  @click="closeFilter"
                  :icon="
                    showContent ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                  "
                  class="white-btn filterClose"
                  >{{ showContent ? '折叠' : '展开' }}</el-button
                >
                <el-button
                  @click="resetForm"
                  icon="el-icon-refresh-left"
                  class="white-btn"
                  >重置</el-button
                >
                <el-button
                  @click="searchForm"
                  icon="el-icon-search"
                  class="dark-btn search-btn"
                  >搜索</el-button
                >
              </el-col>
            </el-row>
          </el-form>
        </div>
      </v-notes>
      <div style="margin-top:10px">
      <el-button
        @click="synchroData"
        size="mini"
        style="margin-bottom:0 !important"
        v-if="$auth('systemCenter:userInformation:synchronousData')"
      >同步数据</el-button>
      </div>
      <div class="mb-lg">
        <v-table
          :data="userData"
          ref="userMgmtTable"
          size="mini"
          :listLoading="listLoading"
          loadingText="loading"
          :paginationTotal="totalNum"
          v-on:pageSizeChange="pageSizeChange"
          v-on:currentPageChange="currentPageChange"
          border
          pagination
        >
          <el-table-column
            prop="account"
            label="账号"
            min-width="100px"
            align="center"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="employeeId"
            label="员工编号"
            min-width="170px"
            align="center"
            :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column
            prop="userId"
            label="用户编号"
            min-width="170px"
            align="center"
            :show-overflow-tooltip="true">
          </el-table-column>
          <!-- <el-table-column
            prop="tenantId"
            label="租户编号"
            min-width="100px"
            align="center"
            :show-overflow-tooltip="true">
          </el-table-column> -->
          <el-table-column
            prop="name"
            label="姓名"
            align="center"
            :show-overflow-tooltip="true"
            min-width="160px"
          >
          </el-table-column>
          <el-table-column
            prop="nameEn"
            label="英文名"
            align="center"
            :show-overflow-tooltip="true"
            min-width="160px"
          >
          </el-table-column>
          <el-table-column
            prop="userName"
            label="用户名称"
            align="center"
            :show-overflow-tooltip="true"
            min-width="130"
          >
          </el-table-column>
          <el-table-column
            prop="sex"
            label="性别"
            align="center"
            :show-overflow-tooltip="true"
            min-width="130px"
          >
            <template slot-scope="scope">
              <span>{{getDictionaryNameByCode('GENDER', scope.row.sex)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="phoneNum"
            label="手机号码"
            align="center"
            :show-overflow-tooltip="true"
            min-width="130px"
          >
          </el-table-column>
          <el-table-column
            prop="email"
            label="邮箱"
            align="center"
            :show-overflow-tooltip="true"
            min-width="160px"
          >
          </el-table-column>
          <el-table-column
            prop="employeeNo"
            label="工号"
            align="center"
            :show-overflow-tooltip="true"
            min-width="160px"
          >
          </el-table-column>
          <el-table-column
            prop="accountType"
            label="账号类型"
            align="center"
            :show-overflow-tooltip="true"
            min-width="160px"
          >
            <template slot-scope="scope">
              <span>{{getDictionaryNameByCode('ACCOUNTTYPE', scope.row.accountType)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="入职时间" align="center" :show-overflow-tooltip="true" min-width="160">
            <template slot-scope="scope">{{scope.row.registerTime}}</template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            align="center"
            :show-overflow-tooltip="true"
            min-width="160px"
          >
            <template slot-scope="scope">
              <span>{{getDictionaryNameByCode('USERSTATUS', scope.row.status)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" :show-overflow-tooltip="true" min-width="160">
            <template slot-scope="scope">{{scope.row.createTime}}</template>
          </el-table-column>
          <el-table-column label="更新时间" align="center" :show-overflow-tooltip="true" min-width="160">
            <template slot-scope="scope">{{scope.row.updateTime}}</template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center" width="250px">
            <template slot-scope="scope">
              <span
                @click="checkPosition(scope.row)"
                class="editLink"
                v-if="$auth('systemCenter:userInformation:viewPosition')"
              >查看岗位</span>
              <span
                @click="checkUser(scope.row)"
                class="editLink"
                v-if="$auth('systemCenter:userInformation:viewRole')"
              >查看角色</span>
              <span
                @click="checkDataRole(scope.row)"
                class="editLink"
                v-if="$auth('systemCenter:userInformation:dataPermission')"
                >配置数据权限</span>
            </template>
          </el-table-column>
        </v-table>
      </div>
      <el-dialog
        :visible.sync="infoDialog"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :destroy-on-close="true"
        :wrapperClosable="false"
        :element-loading-text="'加载中'"
        width="45%"
        append-to-body
        top="10px"
      >
        <span>查看岗位</span>
        <el-table :data="positionDialogList">
          <el-table-column
          label="岗位编号"
          prop='positionId'
          align="center"
          min-width="100"
          ></el-table-column>
          <el-table-column
          label="岗位名称"
          prop='positionName'
          align="center"
          min-width="180"
          >
          </el-table-column>
        </el-table>
      </el-dialog>
      <el-dialog
        :visible.sync="roleDialog"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :destroy-on-close="true"
        :wrapperClosable="false"
        :element-loading-text="'加载中'"
        width="45%"
        append-to-body
        top="10px"
      >
        <span>查看角色</span>
        <el-table :data="roleDialogList">
          <el-table-column
          label="角色编号"
          prop='bocRoleId'
          align="center"
          min-width="100"
          ></el-table-column>
          <el-table-column
          label="角色名称"
          prop='roleName'
          align="center"
          min-width="180"
          >
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import VNotes from '@/components/Notes/index'
import VTable from '@/components/PageTable/index'
import { common } from '@/mixins/common'
import { getPositionInfo, getRoleInfo, checkPositionInfo, synchronousUser } from '@/api/role'

export default {
  name: 'userinfo',
  components: {
    VTable,
    VNotes
  },
  mixins: [common],
  computed: {
    ...mapGetters(['lookupItems'])
  },
  data () {
    return {
      loadingText: '加载中...',
      pageLoading: false,
      searchList: {
        account: '',
        employeeNo: '',
        employeeId: '',
        userId: '',
        tenantId: '',
        name: '',
        nameEn: '',
        userName: '',
        nickName: '',
        sex: '',
        phoneNum: '',
        email: '',
        accountType: '',
        registerTime: '',
        status: '',
        createTime: [],
        updateTime: []
      },
      roleNameAll: [],
      positionDialogList: [],
      roleDialogList: [],
      userData: [],
      timeData: {
        createTimeFrom: '',
        createTimeTo: '',
        updateTimeFrom: '',
        updateTimeTo: ''
      },
      totalNum: 0,
      pageSize: 10,
      currentPage: 0,
      startUpdateDate: '',
      endUpdateDate: '',
      infoDialog: false,
      roleDialog: false,
      listLoading: false,
      showContent: false,
      pickerOptions: {
        disabledDate (time) {
          // 如果没有后面的-8.64e7就是不可以选择今天的
          return time.getTime() > Date.now() // - 8.64e7
        }
      }
    }
  },
  mounted () {
    this.fetchList()
  },
  methods: {
    resetForm () {
      this.searchList = {}
      this.currentPage = 0
      this.$refs.userMgmtTable.restPage()
      this.fetchList()
    },
    // 搜索页面
    searchForm () {
      this.currentPage = 0
      this.$refs.userMgmtTable.restPage()
      this.fetchList()
    },

    // 获取列表数据
    fetchList () {
      if (!this.$auth('systemCenter:userInformation:list')) {
        // 权限控制
        const msg = '您没有权限'
        this.$alert(msg)
        return false
      }
      this.listLoading = true
      const params = {
        ...this.searchList,
        createTimeFrom: this.searchList.createTime ? new Date(this.searchList.createTime[0] + ' ' + '00:00:00').getTime() : '',
        createTimeTo: this.searchList.createTime ? new Date(this.searchList.createTime[1] + ' ' + '23:59:59').getTime() : '',
        updateTimeFrom: this.searchList.updateTime ? new Date(this.searchList.updateTime[0] + ' ' + '00:00:00').getTime() : '',
        updateTimeTo: this.searchList.updateTime ? new Date(this.searchList.updateTime[1] + ' ' + '23:59:59').getTime() : '',
        registerTimeFrom: this.searchList.registerTime ? new Date(this.searchList.registerTime[0] + ' ' + '00:00:00').getTime() : '',
        registerTimeTo: this.searchList.registerTime ? new Date(this.searchList.registerTime[1] + ' ' + '23:59:59').getTime() : '',
        displayLength: this.pageSize,
        displayStart: this.currentPage
      }
      getPositionInfo(params)
        .then(res => {
          this.listLoading = false
          if (res) {
            if (Number(res.code) === 1) {
              const obj = res.obj
              this.userData = obj.records || []
              this.totalNum = obj.total
            } else if (Number(res.code) === 0) {
              this.$confirm(res.msg, {
                confirmButtonText: '确定',
                showCancelButton: false
              })
            } else {
              this.$confirm(this.$t(res.code), {
                confirmButtonText: '确定',
                showCancelButton: false
              })
            }
          }
        })
        .catch(() => {
          this.listLoading = false
        })
    },

    // 点击查看岗位
    checkPosition (row) {
      this.infoDialog = true
      checkPositionInfo(row.userId)
        .then(res => {
          this.listLoading = false
          if (res) {
            if (Number(res.code) === 1) {
              const obj = res.obj
              this.positionDialogList = obj || []
            } else if (Number(res.code) === 0) {
              this.$confirm(res.msg, {
                confirmButtonText: '确定',
                showCancelButton: false
              })
            } else {
              this.$confirm(this.$t(res.code), {
                confirmButtonText: '确定',
                showCancelButton: false
              })
            }
          }
        })
    },

    // 点击查看角色
    checkUser (row) {
      this.roleDialog = true
      getRoleInfo(row.userId)
        .then(res => {
          this.listLoading = false
          if (res) {
            if (Number(res.code) === 1) {
              const obj = res.obj
              this.roleDialogList = obj || []
            } else {
              this.$confirm(res.code, {
                confirmButtonText: '确定',
                showCancelButton: false
              })
            }
          }
        })
    },

    // 同步数据
    synchroData () {
      const timestampChang = this.$root.$options.filters.timestampToChange
      this.startUpdateDate = timestampChang(new Date().getTime()) + '00:00:00'
      this.endUpdateDate = timestampChang(new Date().getTime(), 'time')
      const params = {
        startUpdateDate: this.startUpdateDate,
        endUpdateDate: this.endUpdateDate,
        pageSize: '100'
      }
      synchronousUser(params).then(response => {
        // 调用接口保存新增修改attribute
        const data = response
        if (data) {
          if (Number(data.code) === 1) {
            this.fetchList()
          } else if (Number(data.code) === 101) {
            this.$confirm('数据已经是最新版本', {
              confirmButtonText: '确认',
              showCancelButton: false
            })
          } else {
            this.$confirm(data.code, {
              confirmButtonText: '确认',
              showCancelButton: false
            })
          }
        }
      })
    },

    checkDataRole (row) {
      this.$router.push({ name: 'checkDateRole', params: { id: row } })
    },

    closeFilter () {
      this.showContent = !this.showContent
    },
    // 每页数据数目改变
    pageSizeChange (size) {
      this.pageSize = size
      this.fetchList()
    },
    // 当前页改变
    currentPageChange (curPage) {
      this.currentPage = curPage - 1
      this.fetchList()
    }
  }
}
</script>
